<template>

  

  <TopNavBar title="AI量化套利" @rightClick="handleRightClick" type="back" right rightType="true" />
  <div style="height: 20px;"></div>
  <div>
    <!-- 头部 -->
    <SecondContractHeader
      :coinInfo="coinInfo"
      @showSidePopup="showSidePopup"
    ></SecondContractHeader>
    <Candlestick :coinInfo="coinInfo" type="secondContract"></Candlestick>
    <!-- 顶部tab栏 -->
  <div class="aiarb-tabs">
    <div
      class="aiarb-tab"
      :class="{active: activeTab === 'market'}"
      @click="activeTab = 'market'"
    >交易所行情</div>
    <div
      class="aiarb-tab"
      :class="{active: activeTab === 'order'}"
      @click="activeTab = 'order'"
    >买賣盘</div>
    <div class="aiarb-tab-indicator" :style="{left: activeTab === 'market' ? '0%' : '50%'}"></div>
  </div>
    <!-- tab内容切换 -->
    <div v-if="activeTab === 'market'">
      <!-- 行情卡片列表 -->
      <div class="exchange-list">
        <div class="exchange-card-new" v-for="item in exchangeList" :key="item.name">
          <div class="exchange-card-row exchange-card-row-top">
            <div class="exchange-col">
              <div class="exchange-value-main">{{ item.volume }}</div>
              <div class="exchange-label-main">24H交易量</div>
            </div>
            <div class="exchange-col">
              <div class="exchange-value-main" :class="{'up': item.change > 0, 'down': item.change < 0}">
                {{ item.change > 0 ? '+' : ''}}{{ (item.change * 100).toFixed(2) }}%
              </div>
              <div class="exchange-label-main">涨跌幅</div>
            </div>
            <div class="exchange-col">
              <div class="exchange-value-main">{{ item.buyPrice }}</div>
              <div class="exchange-label-main">买入价</div>
            </div>
          </div>
          <div class="exchange-card-row exchange-card-row-bottom">
            <div class="profit-btn-new">套利</div>
            <div class="exchange-logo-new">
              <img :src="item.logo" :alt="item.name" />
            </div>
            <div class="exchange-name-new">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="order-table-wrap">
      <table class="order-table">
        <thead>
          <tr>
            <th>时间</th>
            <th>方向</th>
            <th>价格</th>
            <th>数量</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, idx) in orderList" :key="idx">
            <td>{{ item.time }}</td>
            <td class="order-side-buy">买入</td>
            <td>{{ item.price }}</td>
            <td>{{ item.amount }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 页面底部按钮和弹窗 -->
  <div class="bottom-btn-wrap">
    <button class="quant-btn" @click="showQuantPopup = true">立即委託</button>
  </div>
  <div v-if="showQuantPopup" class="quant-popup-mask" @click.self="showQuantPopup = false">
    <div class="quant-popup-content">
      <QuantContract :quickOrder="true" :aiType="3" />
    </div>
  </div>

  <div style="height: 100px;"></div>
</template>

<script setup>
import SecondContractHeader from '@/views/trade/components/secondContract/header/index.vue' // 秒合约header部分
import Candlestick from '@/views/trade/components/common/candlestick.vue'
import { useRoute } from 'vue-router'
import { useTradeStore } from '@/store/trade'
import { useRouter } from 'vue-router'
import QuantContract from '@/views/home/QuantContract.vue'
const router = useRouter()
const tradeStore = useTradeStore()
const coinInfo = ref({})
const $route = useRoute()
const activeTab = ref('market')
const showQuantPopup = ref(false)
// 监听路由展示对应币种信息
watch(
  () => $route.query.symbol,
  (val) => {
    coinInfo.value = tradeStore.secondContractCoinList.filter((item, index) => {
      return item.coin === val
    })[0]
  },
  {
    deep: true
  }
)
// 初始化展示币种信息
const init = () => {
  if ($route.query.symbol) {
    coinInfo.value = tradeStore.secondContractCoinList.filter((item, index) => {
      return item.coin === $route.query.symbol
    })[0]
    if (!coinInfo.value) {
      coinInfo.value = tradeStore.secondContractCoinList[0]
    }
  } else {
    coinInfo.value = tradeStore.secondContractCoinList[0]
  }
}
onMounted(() => {
  init()
})
// 静态行情数据
const exchangeList = [
  {
    name: 'Huobi',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/949bc8d1f5d1491d8f2d57e07cf553e2.png',
    logoBg: '#F5F6FA',
    volume: '223,115,690.565288',
    change: -0.0044,
    buyPrice: '116,696.47392',
  },
  {
    name: 'Kucoin',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/ebc5ce99263441e28d8d0744aebde90a.png',
    logoBg: '#F5F6FA',
    volume: '2,889.932322',
    change: 0.005,
    buyPrice: '118,590.8',
  },
  {
    name: 'Bybit',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/cc2045182b7d45159a3a7d2d81a44231.png',
    logoBg: '#F5F6FA',
    volume: '71,937.337',
    change: 0.0056,
    buyPrice: '118,583.6',
  },
  {
    name: 'Gate.io',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/f43e159f629c4054b2de07c5dfbc90d4.png',
    logoBg: '#F5F6FA',
    volume: '6,738.669492',
    change: 0.005,
    buyPrice: '118,601.4',
  },
  {
    name: 'Upbit',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/a6e39de4f9824e9d83da2a93ebdfcc29.png',
    logoBg: '#F5F6FA',
    volume: '4.305569',
    change: 0.010369,
    buyPrice: '119,153.59',
  },
  {
    name: 'Binance',
    logo: 'https://xinyuanimg-c.oss-cn-hongkong.aliyuncs.com/public/bc2525ef9de3407f970043b98df9e2d5.png',
    logoBg: '#F5F6FA',
    volume: '16,375.89067',
    change: 0.00553,
    buyPrice: '118,853.288655',
  },
]
const orderList = [
  { time: '05:34:23', price: '118,460.24', amount: '0.00005' },
  { time: '05:34:23', price: '118,460.39', amount: '0.00007' },
  { time: '05:34:23', price: '118,460.99', amount: '0.0001' },
  { time: '05:34:23', price: '118,461', amount: '0.0001' },
  { time: '05:34:23', price: '118,461.24', amount: '0.0001' },
  { time: '05:34:23', price: '118,461.39', amount: '0.0001' },
  { time: '05:34:23', price: '118,461.99', amount: '0.0001' },
  { time: '05:34:23', price: '118,462', amount: '0.0001' },
  { time: '05:34:23', price: '118,462.24', amount: '0.00015' },
  { time: '05:34:23', price: '118,462.39', amount: '0.00015' },
  { time: '05:34:23', price: '118,462.73', amount: '0.00015' },
  { time: '05:34:23', price: '118,462.99', amount: '0.0001' },
  { time: '05:34:23', price: '118,463', amount: '0.0001' },
  { time: '05:34:23', price: '118,463.24', amount: '0.0001' },
  { time: '05:34:23', price: '118,463.39', amount: '0.0001' },
  { time: '05:34:23', price: '118,463.99', amount: '0.000106' },
]
function handleRightClick() {
  router.push('/aiArbOrder')
}
</script>

<style scoped>
.aiarb-tabs {
  display: flex;
  position: relative;
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
  margin-bottom: 8px;
  overflow: hidden;
}
.aiarb-tab {
  flex: 1;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #888;
  padding: 16px 0 12px 0;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 0.2s;
}
.aiarb-tab.active {
  color: #222;
  font-weight: 600;
}
.aiarb-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 3px;
  background: linear-gradient(90deg, #4F8AFF 0%, #1FC8DB 100%);
  border-radius: 2px 2px 0 0;
  transition: left 0.25s;
  z-index: 2;
}
.order-placeholder {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 16px;
}
.exchange-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 16px;
}
.exchange-card-new {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
  padding: 18px 12px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.exchange-card-row {
  display: flex;
  width: 100%;
}
.exchange-card-row-top {
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 8px;
  border-bottom: 1px solid #ececec;
}
.exchange-col {
  flex: 1;
  text-align: center;
}
.exchange-value-main {
  font-size: 12px;
  font-weight: 600;
  color: #000;
  line-height: 1.2;
}
.exchange-value-main.up {
  color: #00c693;
}
.exchange-value-main.down {
  color: #FF4D4F;
}
.exchange-label-main {
  font-size: 10px;
  color: #000;
  margin-top: 2px;
}
.exchange-card-row-bottom {
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
}
.profit-btn-new {
  color: #222;
  font-size: 14px;
  font-weight: 500;
  border-radius: 12px;
  padding: 4px 18px;
  margin-right: 2px;
}
.exchange-logo-new {
  background: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.04);
}
.exchange-logo-new img {
  width: 22px;
  height: 22px;
}
.exchange-name-new {
  font-size: 15px;
  color: #222;
  font-weight: 500;
  margin-left: 2px;
}
.order-table-wrap {
  margin: 18px 0 0 0;
  padding: 0 16px;
}
.order-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  font-size: 13px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.03);
}
.order-table th {
  font-weight: 700;
  color: #000;
  background: #fff;
  padding: 8px 0 8px 0;
  text-align: left;
}
.order-table td {
  color: #000;
  padding: 6px 0 6px 0;
  text-align: left;
  border: none;
}
.order-side-buy {
  color: #00c693;
  font-weight: 600;
}
.bottom-btn-wrap {
  position: fixed;
  padding-top: 10px;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 100;
  display: flex;
  justify-content: center;
  background-color: #fff;
  padding-bottom: 10px;
}
.quant-btn {
  width: 90vw;
  max-width: 400px;
  height: 48px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}
.quant-popup-mask {
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.quant-popup-content {
  width: 100vw;
  max-width: 500px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  min-height: 60vh;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -2px 16px rgba(0,0,0,0.08);
  animation: popupUp 0.3s;
}
@keyframes popupUp {
  from { transform: translateY(100%);}
  to { transform: translateY(0);}
}
</style> 